{% extends "base.html" %}
{% load staticfiles %}
{% load mptt_tags %}

<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <!-- 文章详情 -->
    <div class="container">
        <div class="row">
            <div class="col-9">

                <!-- 标题及作者 -->
                <h1 class="col-12 mt-4 mb-4">
                    {{ article.title }}
                </h1>
                <div class="col-12 alert alert-success">
                    <div>
                        作者：{{ article.author }}
                        {% if user == article.author %}
                            · <a href="{% url "article:article_update" article.id %}">更新文章</a>
                            {# · <a href="{% url "article:article_delete" article.id %}">删除文章</a>#}
                            {# · <a href="#" onclick="confirm_delete()">删除文章</a>#}
                            · <a href="#" onclick="confirm_safe_delete()">删除文章</a>
                        {% endif %}
                    </div>
                    <div>
                        浏览数：{{ article.total_views }}
                    </div>
                    <!-- 新增一个隐藏的表单 -->
                    <!-- 弹窗不再发起 GET 请求，而是通过 Jquery 选择器找到隐藏的表单，并点击发送按钮 -->
                    <form
                            style="display: none;"
                            id="safe_delete"
                            action="{% url 'article:article_safe_delete' article.id %}"
                            method="POST"
                    >
                        {% csrf_token %}
                        <button type="submit">发送</button>
                    </form>
                </div>

                <!-- 文章正文 -->
                <div class="col-12">
                    {# |safe给article.body贴了一个标签，表示这一段字符不需要进行转义了。 #}
                    <p>{{ article.body|safe }}</p>
                </div>

                <!-- 发表评论 -->
                <hr>
                {% if user.is_authenticated %}
                    <div>
                        <form action="{% url 'comment:post_comment' article.id %}" method="POST">
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="body">
                                    <strong>发言：</strong>
                                </label>
                                {# <textarea type="text" name="body" id="body" class="form-control" rows="2"></textarea>#}
                                <div>
                                    {{ comment_form.media }}
                                    {{ comment_form.body }}
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">发送</button>
                        </form>
                    </div>
                    <br>
                {% else %}
                    <br>
                    <h5 class="row justify-content-center">
                        请<a href="{% url 'userprofile:login' %}">登录</a>后评论
                    </h5>
                {% endif %}

                <h4>共有{{ comments.count }}条评论</h4>
                <div class="row">
                    <!-- 遍历树形结构 -->
                    {% recursetree comments %}
                        <!-- 给 node 取个别名 comment -->
                        {% with comment=node %}
                            <div class="{% if comment.reply_to %}
                                            offset-1 col-11
                                        {% else %}
                                            col-12
                                        {% endif %}"
                                 id="comment_elem_{{ comment.id }}">
                                <hr>
                                <p>
                                    <strong style="color: pink">
                                        {{ comment.user }}
                                    </strong>
                                    {% if comment.reply_to %}
                                        <i class="far fa-arrow-alt-circle-right"
                                           style="color: cornflowerblue;"
                                        ></i>
                                        <strong style="color: pink">
                                            {{ comment.reply_to }}
                                        </strong>
                                    {% endif %}
                                </p>
                                <div>{{ comment.body|safe }}</div>
                                <div>
                                <span style="color: gray">
                                    {{ comment.created|date:"Y-m-d H:i" }}
                                </span>
                                    <!-- 加载 modal 的按钮 -->
                                    {% if user.is_authenticated %}
                                        <button type="button"
                                                class="btn btn-light btn-sm text-muted"
                                                onclick="load_modal({{ article.id }}, {{ comment.id }})"
                                        >回复
                                        </button>
                                    {% else %}
                                        <a class="btn btn-light btn-sm text-muted"
                                           href="{% url 'userprofile:login' %}">回复</a>
                                    {% endif %}
                                </div>
                                <!-- Modal -->
                                <div class="modal fade"
                                     id="comment_{{ comment.id }}"
                                     tabindex="-1"
                                     role="dialog"
                                     aria-labelledby="CommentModalCenter"
                                     aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                        <div class="modal-content" style="height: 480px">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalCenterTitle">
                                                    回复 {{ comment.user }}：</h5>
                                            </div>
                                            <div class="modal-body" id="modal_body_{{ comment.id }}"></div>
                                        </div>
                                    </div>
                                </div>
                                {% if not comment.is_leaf_node %}
                                    <div class="children">
                                        {{ children }}
                                    </div>
                                {% endif %}
                            </div>
                        {% endwith %}
                    {% endrecursetree %}
                </div>
            </div>

            <!-- 文章目录 -->
            <div class="sidebar" id="sidebar">
                <div class="sidebar__inner">
                    <h4><strong>目录</strong></h4>
                    <hr>
                    <div>{{ toc|safe }}</div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .sidebar {
            will-change: min-height;
        }

        .sidebar__inner {
            transform: translate(0, 0);
            transform: translate3d(0, 0, 0);
            will-change: position, transform;
        }
    </style>

    <script>
        // 删除文章的函数
        function confirm_delete() {
            // 调用 layer 弹窗组件
            layer.open({
                // 弹窗标题
                title: "删除确认",
                // 正文
                content: "确认删除这篇文章嘛？",
                // 点击确定按钮后调用的回调函数
                yes: function (index, layer) {
                    // 指定应当前往的 url
                    location.href = '{% url "article:article_delete" article.id %}'
                },
            })
        }

        <!-- 使用表单发起 POST 请求，并携带了 csrf 令牌，从而避免了 csrf 攻击 -->
        function confirm_safe_delete() {
            layer.open({
                title: "确认删除",
                content: "确认删除这篇文章？",
                yes: function (index, layero) {
                    $('form#safe_delete button').click();
                    layer.close(index);
                }
            })
        }
    </script>
    <!-- Ckeditor编辑器本身有一个inline-block的样式，需要用Jquery语法将其清除掉 -->
    {% block script %}
        <script>
            $(".django-ckeditor-widget").removeAttr('style');
        </script>

        <!-- 引入粘性侧边栏 -->
        <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
        <script type="text/javascript">
            $('#sidebar').stickySidebar({
                topSpacing: 20,
                bottomSpacing: 20,
            });
        </script>
        <!-- 唤醒二级回复的 modal -->
        <script>
            // 加载 modal
            function load_modal(article_id, comment_id) {
                let modal_body = '#modal_body_' + comment_id;
                let modal_id = '#comment_' + comment_id;

                // 加载编辑器
                if ($(modal_body).children().length === 0) {
                    let content = '<iframe src="/comment/post-comment/' +
                        article_id +
                        '/' +
                        comment_id +
                        '"' +
                        ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
                        comment_id +
                        '"></iframe>';
                    $(modal_body).append(content);
                }
                ;
                $(modal_id).modal('show');
            }

            // 新增函数，处理二级回复
            function post_reply_and_show_it(new_comment_id) {
                let next_url = "{% url 'article:article_detail' article.id %}";
                // 去除 url 尾部 '/' 符号
                next_url = next_url.charAt(next_url.length - 1) === '/' ? next_url.slice(0, -1) : next_url;
                // 刷新并定位到锚点
                window.location.replace(next_url + "#comment_elem_" + new_comment_id);
            };
        </script>
    {% endblock %}
{% endblock content %}